import React from 'react'
import { connect } from 'react-redux'
import { ImportStyle } from 'sp-css-import'
import { pageinfo, store } from 'super-project'
import Sizing from '@ui/layout/sizing'
import { getList, changeFilter, refresh } from '@redux/order/actions'
// import DatePicker from 'react-date-picker'
// import DateRangePicker from 'react-daterange-picker'
import DatePicker from 'react-datepicker'
import moment from 'moment'

import 'react-datepicker/dist/react-datepicker.css';

const { dispatch } = store


@connect((state) => ({
    count: state.order.orderTotalCount,
    list: state.order.orderList,
    r: state.order.r,
    // pageSize: state.order.filterPageSize,
    // pageIndex: state.order.filterPageIndex,
}))
@pageinfo((state/*, renderProps*/) => ({
    title: __('welcome'),
    metas: [
        { 'description': 'Super Project' },
        { 'super-locale-id': state.localeId },
    ]
}))
@ImportStyle(require('./index.less'))
export default class extends React.Component {

    constructor() {
        super()

        this.resetFilter()
    }

    // state = {
    //     startDate: moment()
    // }

    filter = {}

    resetFilter() {
        this.filter = {
            page: 1,
            size: 30,
            startDate: '',
            endDate: '',

            userNickName: '',
            receiverName: '',
            productName: '',
            currentDate: '',
            receiverMobile: '',
            orderId: '',
            isRenew: '', //是否续费订单 1：是 2：不是
            orderValidStatus: '', //订单有效状态  1：有效 2：无效
            orderType: '',
            orderBy: ''
        }
    }

    render() {

        const { list, count } = this.props
        const pageSize = this.filter.size
        const pageIndex = this.filter.page

        // pager
        let pageCount = parseInt(count / pageSize)
        if (count % pageSize != 0) pageCount++
        const pager = (() => {
            const pages = []
            for (let i = 1; i <= pageCount; i++) {
                let active = (pageIndex == i) ? 'active' : ''
                pages.push(<a className={active} onClick={this.onPagerChange(i)}> {i} </a>)
            }
            return pages
        })();

        // data list
        const trs = list.map(item => {
            return <tr>
                <td><h3>{item.productName}</h3><p>体验餐次日配送</p></td>
                <td><div>{item.userNickname}</div><div>{item.receiverName}<br />{item.receiverMobile}</div></td>
                <td>{moment(item.payTime).format('YYYY-MM-DD HH:mm:ss')}</td>
                <td>{item.productPrice / 100.00} 元</td>
                <td>{item.orderType}</td>
                <td>{item.receiverAddress}</td>
                <td>修改</td>
            </tr>
        })

        return (
            <Sizing>
                <div className={this.props.className}>
                    <div className="filter-box-wapper clearfix">
                        <div className="filter-box">
                            <form class="pure-form pure-form-stacked">
                                <fieldset>
                                    <div class="pure-g">
                                        <div class="pure-u-1 pure-u-md-1-3">
                                            <label for="first-name">配 送 点</label>
                                            <select ref="peisongdian" class="pure-input-1-2">
                                                <option value='1'>猎豹移动</option>
                                            </select>
                                        </div>


                                        <div class="pure-u-1 pure-u-md-1-2">
                                            <label for="last-name">下单时间</label>
                                            <div className="pure-u-1-3"><DatePicker dateFormat="YYYY-M-D" selected={this.filter._startDate} onChange={this.handleChangeStart.bind(this)}></DatePicker></div>

                                            {/* <input ref='start' class="pure-u-23-24" type="text" value='2018-11-11' /> */}
                                            <span className='zhi'>至</span>
                                            <div className="pure-u-1-3"><DatePicker dateFormat="YYYY-M-D" selected={this.filter._endDate} onChange={this.handleChangeEnd.bind(this)}></DatePicker></div>
                                            {/* <input ref='end' class="pure-u-23-24" type="text" value='2018-11-11' /> */}
                                        </div>

                                        <div class="pure-u-1 pure-u-md-1-3">
                                            <label for="first-name">下单类型</label>
                                            <select ref='xiadanleixing' class="pure-input-1-2">
                                                <option value='1'>包月</option>
                                            </select>
                                        </div>

                                        <div class="pure-u-1 pure-u-md-1-2">
                                            <label for="first-name"></label>
                                            <select ref='other' class="pure-input-1-3">
                                                <option value='wx'>微信昵称</option>
                                                <option value='name'>收货人姓名</option>
                                                <option value='phone'>收货人电话</option>
                                            </select>
                                            <span className='zhi'></span>
                                            <input ref='otherValue' class="pure-u-23-24" type="text" />
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                        <div className="filter-box-right">
                            <button class="pure-button pure-button-primary button-xlarge" onClick={this.onSearch}>查询</button>
                            {' '}<button class="pure-button  button-xlarge" onClick={this.onClear}>清空</button>
                        </div>
                    </div>


                    <div className="table-info">
                        共 <a>{count}</a> 条记录， 每页显示{' '}
                        <a className={(() =>{ return pageSize == 30 ? 'active':'' })()} onClick={this.onPageSizeChange(30)}>30</a>{' '}
                        <a className={(() =>{ return pageSize == 50 ? 'active':'' })()} onClick={this.onPageSizeChange(50)}>50</a>{' '}
                        <a className={(() =>{ return pageSize == 100 ? 'active':'' })()} onClick={this.onPageSizeChange(100)}>100</a> 条记录
                    </div>

                    <table className='pure-table pure-table-bordered'>
                        <thead>

                            <tr>
                                <td>商品</td>
                                <td>买家</td>
                                <td>下单时间</td>
                                <td>实付金额</td>
                                <td>订单类型</td>
                                <td>配送地点</td>
                                <td>快捷操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            {trs}
                        </tbody>
                    </table>

                    <div className="pager">
                        <a> 上一页 </a>
                        {pager}
                        <a> 下一页 </a>
                    </div>
                    <Dialog></Dialog>
                </div>
            </Sizing>

        )
    }

    componentDidMount() {
        dispatch(getList(this.filter))
    }

    handleChangeStart(date) {
        this.filter._startDate = date
        this.filter.startDate = date.format('YYYY-MM-DD')
        dispatch(refresh())
    }

    handleChangeEnd(date) {
        this.filter._endDate = date
        this.filter.endDate = date.format('YYYY-MM-DD')
        dispatch(refresh())
    }

    onPageSizeChange = (size) => {
        const me = this
        return () => {
            me.filter.size = size
            dispatch(getList(me.filter))
        }
    }
    onPagerChange = (page) => {
        const me = this
        return () => {
            me.filter.page = page
            dispatch(getList(me.filter))
        }
    }

    onClear = () => {
        // this.refs.peisongdian.value = ''
        // this.refs.xiadanleixing.value = ''
        // this.refs.start.value = ''
        // this.refs.end.value = ''
        // this.refs.other.value = ''
        // this.refs.otherValue.value = ''
        this.resetFilter()
        dispatch(refresh())
    }

    onSearch = () => {

        // this.filter.userNickName = ''
        // this.filter.productName = ''
        // this.filter.receiverMobile = ''


        // let filterPeisongdian = this.refs.peisongdian.value
        // let filterDindanleixing = this.refs.xiadanleixing.value
        // let filterXiadanshijStart = this.refs.start.value
        // let filterXiadanshijEnd = this.refs.end.value
        // let filterNeirongleixing = this.refs.other.value
        // let filterNeirong = this.refs.otherValue.value

        // dispatch(changeFilter(this.filter))

        // clear
        this.filter.userNickName = ''
        this.filter.receiverMobile = ''
        this.filter.receiverName = ''
        // set
        const type = this.refs.other.value
        const value = this.refs.otherValue.value
        if(type === 'wx') this.filter.userNickName = value
        if(type === 'phone') this.filter.receiverMobile = value
        if(type === 'name') this.filter.receiverName = value

        dispatch(getList(this.filter))
    }

    // getFilter = () => {
    //     return {
    //         size,
    //         page,
    //         userNickName,
    //         productName,
    //         startDate,
    //         endDate,
    //         currentDate,
    //         receiverMobile,
    //         orderId,
    //         isRenew,
    //         orderValidStatus,
    //         orderType,
    //         orderBy
    //     }
    // }
}

const Dialog = (props) => {

    return (
        <div className="dialog-wapper">
            <div className="dialog-box">
                <div className="title">修改订单</div>
                <div className="content">
                    <form class="pure-form pure-form-stacked">
                        <fieldset>
                            <div class="pure-g">
                                <div class="pure-u-1 pure-u-md-1-2">
                                    <label for="first-name">收 货 人</label>
                                    <input class="pure-u-23-24" type="text" value='2018-11-11' />
                                </div>

                                <div class="pure-u-1 pure-u-md-1-2">
                                    <label for="last-name">联系电话</label>
                                    <input class="pure-u-23-24" type="text" value='2018-11-11' />
                                </div>

                                <div class="pure-u-1 pure-u-md-1-2">
                                    <label for="first-name">配 送 点</label>
                                    <select class="pure-input-1-2">
                                        <option value='1'>猎豹移动</option>
                                        <option>CA</option>
                                        <option>IL</option>
                                    </select>
                                </div>

                                <div class="pure-u-1 pure-u-md-1-2">
                                    <label for="last-name">忌口水果</label>
                                    <input class="pure-u-23-24" type="text" value='2018-11-11' />
                                </div>
                            </div>
                        </fieldset>
                    </form>

                    <div>延期配送</div>
                    <div className="date-items clearfix">
                        <div className="date-item"><input type="checkbox" />7月6日</div>
                        <div className="date-item"><input type="checkbox" />7月6日</div>
                        <div className="date-item"><input type="checkbox" />7月6日</div>
                        <div className="date-item"><input type="checkbox" />7月6日</div>
                        <div className="date-item"><input type="checkbox" />7月6日</div>
                        <div className="date-item"><input type="checkbox" />7月6日</div>
                        <div className="date-item"><input type="checkbox" />7月6日</div>
                    </div>

                    <div className="btn-box">
                        <button class="pure-button pure-button-primary">查询</button>{' '}
                        <button class="pure-button">取消</button>
                    </div>
                </div>
            </div>
        </div>
    )

}
